
#box {
  background: url("assets/tmp/img/bi/backgroundImg.png") no-repeat;
  background-size: 100% 100%;
  //height: 100%;
  height: 1080px;
  width: 1920px;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: '宋体';
}

#box:focus {
  outline: none;
}

.logo {height: 110px;width: 389px}

.borders {
  background: url("assets/tmp/img/bi/selectOff.png") no-repeat transparent;
  background-size: 100% 100%;
  height: 250px;
  width: 350px;
  position: fixed;
  .borders-son {
    height: 250px;
    width: 350px;
    position: fixed;
    z-index: 100;
  }
  &:nth-child(1) {
    top: 16%;
    left: 24%;
    .main > .son {
      //background: url("assets/tmp/img/bi/control-index/swzk.png");
      background-size: 100% 100%;
    }
  }
  &:nth-child(2) {
    top: 16%;
    left: 55%;
    .main > .son {
      //background: url("assets/tmp/img/bi/control-index/mgzk.png");
      background-size: 100% 100%;
    }
  }
  &:nth-child(3) {
    top: 55%;
    left: 7%;
    .main > .son {
      //background: url("assets/tmp/img/bi/control-index/kfzk.png");
      background-size: 100% 100%;
    }
  }
  &:nth-child(4) {
    top: 55%;
    left: 39.5%;
    .main > .son {
      //background: url("assets/tmp/img/bi/control-index/cgzk.png");
      background-size: 100% 100%;
    }
  }
  &:nth-child(5) {
    top: 55%;
    left: 72%;
    .main > .son {
      //background: url("assets/tmp/img/bi/control-index/clzk.png");
      background-size: 100% 100%;
    }
  }
  &:hover,&:focus,&:active {
    background: url("assets/tmp/img/bi/selectOn.png") no-repeat transparent;
    background-size: 100% 100%;
    outline:none;
    box-shadow: none;
    .son-b {
      color: #000103;
      font-weight: 700;
    }
    .borders-son {
      background: url("assets/tmp/img/bi/selectOnSon.gif") no-repeat transparent;
      background-size: 100% 100%;
    }
  }
}

.system-point {
  background: url("assets/tmp/img/bi/backPoint.gif") no-repeat transparent;
  background-size: 100% 100%;
  height: 31px;
  width: 200px;
  position: fixed;
  top: 52%;
}

.system-cloud {
  background: url("assets/tmp/img/bi/backCloud.png") no-repeat transparent;
  background-size: 100% 100%;
  height: 540px;
  width: 960px;
  position: fixed;
  top: 14%;
  left: 14%;
  bottom: 0;
  right: 0;
  opacity: 0.8;
  transform: translate3d(0, 0, 0);
  animation: spin 25s linear infinite;
}

.system-triangle {
  background: url("assets/tmp/img/bi/backTriangle.png") no-repeat transparent;
  background-size: 100% 100%;
  height: 60px;
  width: 63px;
  position: fixed;
  bottom: 2%;
  right: 33%;
  transform: translate3d(0, 0, 0);
  animation: spin 5s linear infinite;
}

.system-circle {
  background: url("assets/tmp/img/bi/backCircle.png") no-repeat transparent;
  background-size: 100% 100%;
  height: 108px;
  width: 110px;
  position: fixed;
  top: 11%;
  left: 20%;
  transform: translate3d(0, 0, 0);
  animation: spin 5s linear infinite;
}

.main {
  position: fixed;
  height: 350px;
  width: 562px;
  display: block;
  transform: scale(0.578);
  &:nth-child(1) {
    transform-origin: 4% 9%;
  }
}

.son {
  position: fixed;
  height: 100%;
  width: 100%;
  border: 4px solid #07a1e4;
  box-sizing: content-box;
}

.son-a {
  position: fixed;
  height: 250px;
  width: 350px;
  display: block;
  border: 0;
  z-index: 1000;
}

.son-b {
  position: fixed;
  bottom: -15.2%;
  width: 100%;
  font-size: 21px;
  text-align: center;
  color: #fff;
}

.main-title {
  margin-top: 25px;
  font-size: 55px;
  text-align: center;
  position: fixed;
  width: 100%;
  color: #fefefc;
}

.main-subhead-pic {
  //background: url("assets/tmp/img/bi/3dTypeface.png") no-repeat transparent;
  background-size: 100% 100%;
  height: 97px;
  width: 389px;
  position: fixed;
  top: 1%;
  right: 1%;
}

.main-copy {
  font-size: 16px;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  font-family: 'Microsoft YaHei UI';
  color: #f1fa05;
}
